<template>
  <!-- 点击购物车时触发显示页面 -->
  <div id="article-order">
    <div id="article-order-page-header">
      <el-page-header @back="goBack" content="详情页面"/>
    </div>
    <div id="article-order-list">
      <el-row>
        <span>
          <svg-icon icon-class="product"/>&ensp;全部商品
        </span>
      </el-row>
      <el-divider/>
      <el-row id="article-order-details" v-for="(product,index) in products" :key="index">
        <el-col :lg="1">
          <el-checkbox :ref="'check_'+product.purchaseId" @change="check(product)"/>
        </el-col>
        <el-col :lg="22">
          <el-row>
            <el-col :lg="6">
              <el-image :src="product.picUrl"/>
            </el-col>
            <el-col :lg="16" id="product-details">
              <el-row>
                <span>{{product.title}}</span>
              </el-row>
              <el-row>
                <span>作者：&ensp;</span>
                <span>{{product.person}}</span>
              </el-row>
              <el-row>
                <span>发表时间：&ensp;</span>
                <span>{{product.publishTime}}</span>
              </el-row>
              <el-row>
                <span>价格：&ensp;</span>
                <span>￥{{product.price}}</span>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :lg="1">
          <span @click="remove(product)">移除</span>
        </el-col>
      </el-row>
      <el-divider/>
      <el-row id="article-order-checked-all">
        <span>
          <el-checkbox v-model="isCheckedAll" @change="checkAll"/>&ensp;全选
        </span>
        &ensp;&ensp;
        <span @click="removeChecked">
          移除选中商品
        </span>
        <span>
          <span>
            <span>
              合计：
            </span>
            <span id="lump-sum-price">
              ￥{{lumpSumPrice}}
            </span>
          </span>
          &ensp;
          <span>
            <el-button type="primary">去结算</el-button>
          </span>
        </span>
      </el-row>
    </div>
  </div>
</template>

<script>
import {queryPurchaseList,deletePurchase} from "@/api/article/Order";

export default {
  name: "Order",
  data() {
    return {
      // 全选判断
      isCheckedAll: false,
      products: [
        {
          purchaseId: 0,
          picUrl:'',
          title: '',
          person: '',
          publishTime: new Date().getFullYear()+'/'+(new Date().getMonth()+1)+'/'+new Date().getDate(),
          price: 0
        },
      ],
      lumpSumPrice: 0
    }
  },
  created() {
    this.init()
  },
  methods: {
      //根据用户查询购物车信息
      init(){
        queryPurchaseList().then(response=>{
          if(response.data.data!=null){
            this.products=response.data.data
          }
        })
      },
      // 点击返回时触发事件
      goBack() {
        this.$router.go(-1);
      },
      // 点击单个复选框时触发事件
      check(product) {
        let _this = this;
        _this.isCheckedAll = true;
        _this.products.forEach(product => {
          // 判断当前复选框选择后是否符合全选条件
          if (!_this.$refs['check_'+product.purchaseId][0]._data.selfModel) {
            _this.isCheckedAll = false;
          } 
        });
        if (_this.$refs['check_'+product.purchaseId][0]._data.selfModel) {
          _this.lumpSumPrice += product.price;
        }
        if (!_this.$refs['check_'+product.purchaseId][0]._data.selfModel) {
          _this.lumpSumPrice -= product.price;
        }
      },
      // 点击全选复选框时触发事件
      checkAll() {
        let _this = this;
        _this.lumpSumPrice = 0;
        // 全选
        if (_this.isCheckedAll) {
          _this.products.forEach(product => {
            _this.$refs['check_'+product.purchaseId][0]._data.selfModel = true;
            _this.lumpSumPrice += product.price; 
          });
        }

        if (!_this.isCheckedAll) {
          _this.products.forEach(product => {
            _this.$refs['check_'+product.purchaseId][0]._data.selfModel = false;
            _this.lumpSumPrice = 0; 
          });
        }
      },
      // 点击“移除”触发事件
      remove(product) {
        this.$confirm('确定将此商品从购物车列表中移除吗？','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //this.products.splice(this.products.indexOf(product),1);
          deletePurchase(product.purchaseId).then(response=>{
            this.init()
          })
        }).catch(() => {})
      },
      // 此方法暂未完善
      removeChecked(index) {
        this.$confirm('确定将此商品从购物车列表中移除吗？','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let _this = this;
          _this.products.forEach(product => {
            if (_this.$refs['check_'+product.purchaseId][0]._data.selfModel) {
              deletePurchase(product.purchaseId).then(response=>{
                this.init()
              })
            } 
          });
        }).catch(() => {})
      }
  }
}
</script>
<style>
  #lump-sum-price {
    font-size: 24px;
    color: rgb(255, 72, 0);
  }
  #article-order-checked-all > span:last-of-type {
    float: right;
  }
  #article-order-checked-all > span:nth-of-type(2) {
    cursor: pointer;
    color: #909399;
  }
  #article-order-checked-all > span:nth-of-type(2):hover {
    color: rgb(47, 0, 255);
  }
  #product-details {
    margin: 1% 2%;
  }
  #product-details .el-row {
    margin-top: 1%;
  }
  #product-details .el-row:last-of-type span:last-of-type {
    font-size: 20px;
    color: rgb(255, 72, 0);
  }
  #product-details .el-row:not(:nth-of-type(1)) span:nth-of-type(1) {
    color: #909399;
  }
  #product-details .el-row:nth-of-type(1) span {
    cursor: pointer;
    font-size: 24px;
  }
  #article-order-details > .el-col:not(:nth-of-type(2)) {
    height: 160px;
    line-height: 160px;
  }
  #article-order-details > .el-col:last-of-type > span {
    cursor: pointer;
    color: #909399;
  }
  #article-order-details > .el-col:last-of-type > span:hover {
    color: rgb(47, 0, 255);
  }
  #article-order-details > .el-col .el-image {
    margin: 10px auto;
    height: 140px;
  }
  #article-order-checked-all {
    margin: 1% auto;
  }
  #article-order-details {
    margin: 1% auto;
    width: 100%;
  }
  #article-order-list {
    margin-top: 3%;
  }
  #article-order {
    width: 84%;
    margin: auto auto;
  }
  #article-order-page-header {
    margin-top: 3%;
    height: 48px;
    -webkit-box-shadow:0px 3px 3px #c8c8c8 ;
    -moz-box-shadow:0px 3px 3px #c8c8c8 ;
    box-shadow:0px 3px 3px #c8c8c8 ;
  }
  #article-order-page-header .el-page-header {
    line-height: 48px;
  }
</style>
